<%@ page contentType="text/html;charset=UTF-8" language="java"  isELIgnored="false"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <title>学生管理系统 - 注册</title>
    <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="icon" href="images/favicon.ico" type="images/x-ico" />
    <meta charset="utf-8">
</head>
<style type="text/css">
    body{
        width: 1220px;
    }
    table{
        position: absolute;
        top: 200px;
        left: 100px;
        text-align: center;
    }
    input{
        height: 35px;
        width: 400px;
        padding-left: 5px;
        font-size: 20px;
        border-radius: 5px;
        border: 1px solid #c9c9c9;
    }
    tr{
        line-height: 60px
    }
    #zhuce{
        border: 0;
        width: 405px;
        height: 50px;
    }
    #zhuce:hover{
        background-color: rgb(44,117,225);
    }
    #bottom{
        font-size: 13px;
        color: #aaa;
        line-height: 20px;
    }
    #bottom input{
        width: 15px;
        height: 15px;
    }
    #bottom span{
        line-height: 15px;
        margin-bottom: 7px;
    }
    #bottom label{
        display: inline-block;
        line-height: 20px;
        margin: 10px 50px;
    }
    #left{
        position: fixed;
        width: 500px;
        height:100%;
        float: left;
        left: 0;
        top: 0;
        background-size: cover;
    }
    form{
        position: absolute;
        right: 45%;
    }
    strong{
        font-size: 40px;
        font-family: 等线;
    }
    #h1 td{
        text-align: left;
        padding-left: 40px;
    }
    #h2{
        text-align: left;
        padding-left: 40px;
    }
    #h2 a{
        margin-left: 100px;
        text-decoration: none;
    }
    #h2 a:hover{
        text-decoration: underline;
    }
    #h2 span{
        font-size: 25px;
    }
    #footer{
        position: absolute;
        bottom: 0;
        right:35%;
        color: #aaa;
    }
</style>
<body onload="move()">
<div id="left"></div>
<form action="RegisterServlet" method="post">
    <table width="500" id="table">
        <tbody>
        <tr id="h1"><td><strong>欢迎来到学生管理系统</strong></td></tr>
        <tr>
            <td id="h2">
                <span>欢迎注册！</span>
            </td>
        </tr>
        <tr>
            <td style="color: red;">
                <span><c:if test="${flag == 'false'}">用户已存在</c:if></span>
            </td>
        </tr>
        <tr>
            <td><input placeholder="用户名" name="username" type="text" required></td>
        </tr>
        <tr>
            <td><input placeholder="密码" type="password" name="password"  id="first" required></td>
        </tr>
        <tr>
            <td><input  placeholder="再次输入" type="password" id="again" required onblur="input_again()" ></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" id="zhuce" class="btn btn-primary" value="立即注册" >
            </td>
        </tr>
        <tr id="bottom" style="text-align: left;">
            <td>
                <label>
                    <input type="checkbox" v-model="flag" id="tiaokuan" @click="change"/>
                    <span>我已阅读并同意相关服务条款和隐私政策</span>
                </label>
            </td>
        </tr>
        </tbody>
    </table>
</form>
<p id="footer">Copyright © 1998-2018Tencent All Rights Reserved</p>
</body>
<script>
    new Vue({
        el: "#table",
        data: {
            flag: false
        },
        methods: {
            change: function() {
                if(this.flag == false) {
                    $("#zhuce").attr("disabled",true);
                }
                else{
                    $("#zhuce").attr("disabled",false);
                }
            }
        },
        created: function () {
            this.change()
        }
    })
</script>
<script type="text/javascript">
    function input_again(){
        var first = document.getElementById("first").value;
        var again = document.getElementById("again").value;
        if (again!=first) {
            alert("两次输入密码不一致！");
            var again = document.getElementById("again").value = "";
        }
    }
    function move()
    {
        var a=Math.floor(Math.random()*3);
        a=parseInt(a);
        var b=document.getElementById("left");
        switch(a)
        {
            case 0:
                b.style.backgroundImage="url(images/注册1.png)";break;
            case 1:
                b.style.backgroundImage="url(images/注册2.png)";break;
            case 2:
                b.style.backgroundImage="url(images/注册3.png)";break;
        }
        setTimeout("move()",3000);
    }

</script>
</html>
